<template>
  <div class="publishhouse">
     <!-- 发布房源 -->
    <van-nav-bar
      title="发布房源"
      left-arrow
    >
      <template #left>
        <van-icon  name="arrow-left" @click="$router.back()"/>
      </template>
    </van-nav-bar>
    <!-- 弹出层1 -->
    <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }" >
      <van-picker
        :default-index="0"
        title="标题"
        show-toolbar
        :columns="roomType"
        @confirm="onConfirm1"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
     <!-- 弹出层2 -->
    <van-popup v-model="show2" position="bottom" :style="{ height: '40%' }" >
      <van-picker
        :default-index="0"
        title="标题"
        show-toolbar
        :columns="floor"
        @confirm="onConfirm2"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
     <!-- 弹出层3 -->
    <van-popup v-model="show3" position="bottom" :style="{ height: '40%' }" >
      <van-picker
        :default-index="0"
        title="标题"
        show-toolbar
        :columns="oriented"
        @confirm="onConfirm3"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <!-- 发布房源详情-->
    <van-cell title="房源信息" title-style="color:green;font-size:15px"/>
    <van-cell title="小区名称" is-link :value="$route.params.val||'请输入小区名称'" to="/rent/search" />
    <van-cell title="租金" value="￥/月" >
      <template #title>
        <div class="box">
          <span>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金 </span>
        <input type="text" v-model="rentvalue" placeholder="请输入租金/月">
        </div>
      </template>
    </van-cell>
     <van-cell value="㎡" >
      <template #title >
        <div class="box">
          <span>建筑面积</span>
        <input type="text" v-model="rentarea" placeholder="请输入建筑面积">
        </div>
      </template>
    </van-cell>
    <van-cell title="户型" is-link :value="value1" @click="show1 = true" >
      <template #title>
        <span>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span>
      </template>
    </van-cell>
    <van-cell title="所在楼层" is-link :value="value2" @click="show2 = true" />
    <van-cell title="朝向" is-link :value="value3"  @click="show3 = true">
      <template #title>
        <span>朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</span>
      </template>
    </van-cell>
    <van-cell title="房屋标题"  />
    <van-cell  label="房屋图像">
      <template #title>
        <div class="box">
          <input type="text" v-model="form.title" style="width:340px" placeholder="请输入标题（例如：整租 小区名 2室 5000元）">
        </div>
      </template>
    </van-cell>
    <!-- 上传图像 -->
    <van-cell  label="房屋配置">
      <template #title>
        <div class="box">
          <van-uploader :after-read="afterRead" v-model="fileList" multiple >
            <van-icon name="plus" class="img" />
          </van-uploader>
        </div>
      </template>
    </van-cell>
    <!--  房屋 服务配置-->
    <van-grid  :column-num="5">
      <van-grid-item    :class="{green:settinglist.includes(obj.label)}" v-for="(obj,index) in oldsupporting" :key="obj.value" icon="photo-o" :text="obj.label" >
        <template #default>
          <input @change="housesetting" :id="obj.label" style="display:none" type="checkbox" v-model="settinglist" :value="obj.label" >
          <label :for="obj.label">
             <van-icon :name="iconArr[index]" />
            <span>{{obj.label}}</span>
          </label>
        </template>
      </van-grid-item>
    </van-grid>
    <div class="footer">
      <van-cell title="房屋描述"  />
      <textarea placeholder="请输入房屋描述信息" v-model="form.description"></textarea>
    </div>
    <div class="tabbar">
       <van-button plain type="primary">取消</van-button>
      <van-button type="primary" @click="getuserpublishhouse">提交</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { houseneedcondition, userpublishhouse, uploadpicture } from '@/api/user'
export default {

  data () {
    return {
      show1: false,
      show2: false,
      show3: false,
      value1: '请选择',
      value2: '请选择',
      value3: '请选择',
      rentvalue: '',
      rentarea: '',
      fileList: [

      ],
      oldfloor: [],
      oldoriented: [],
      oldroomType: [],
      oldsupporting: [],
      floor: [],
      oriented: [],
      roomType: [],
      supporting: [],
      iconArr: ['like-o', 'star-o', 'star-o', 'phone-o', 'setting-o', 'coupon-o', 'cart-o', 'shopping-cart-o', 'friends-o', 'comment-o'],
      form: {
        title: '',
        description: '',
        houseImg: 'img1|im2|img3',
        oriented: 'ORIEN|caa6f80b-b764-c2df',
        supporting: '空调|洗衣机',
        price: '1234',
        roomType: 'ROOM|ce2a5daa-811d-2f49',
        size: '123',
        floor: 'FLOOR|1',
        community: 'AREA|93cbbe43-741d-de54'
      },
      imgsrc: [],
      settinglist: []
    }
  },

  created () {
    this.gethouseneed()
    console.log(this.$route.params.id)
    this.form.community = this.$route.params.id
  },

  methods: {
    onConfirm1 (value, index) {
      this.form.roomType = this.oldroomType[index].value
      this.value1 = value
      this.show1 = false
    },
    onConfirm2 (value, index) {
      this.form.floor = this.oldfloor[index].value
      this.value2 = value
      this.show2 = false
    },
    onConfirm3 (value, index) {
      this.form.oriented = this.oldoriented[index].value
      this.value3 = value
      this.show3 = false
    },
    onChange (picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel () {
      Toast('取消')
      this.show1 = false
      this.show2 = false
      this.show3 = false
    },
    async gethouseneed () {
      const res = await houseneedcondition()
      console.log(res)
      this.oldfloor = res.data.body.floor
      this.oldoriented = res.data.body.oriented
      this.oldroomType = res.data.body.roomType
      this.oldsupporting = res.data.body.supporting
      res.data.body.floor.forEach(item => {
        this.floor.push(item.label)
      })
      res.data.body.oriented.forEach(item => {
        this.oriented.push(item.label)
      })
      res.data.body.roomType.forEach(item => {
        this.roomType.push(item.label)
      })
    },
    async getuserpublishhouse () {
      const res = await userpublishhouse(this.form)
      console.log(res)
    },
    async afterRead (file) {
      console.log(file)
      const form = new FormData()
      this.fileList.forEach(item => {
        form.append('file', item.file)
      })
      console.log(form.get('file'))
      const res = await uploadpicture(form)
      res.data.body.forEach(item => {
        this.imgsrc.push(item)
      })
      this.form.houseImg = this.imgsrc.join('|')
      console.log(this.form.houseImg)
    },
    housesetting () {
      this.form.supporting = this.settinglist.join('|')
    }
  }
}
</script>

<style scoped lang='less'>
.publishhouse{
  .van-cell{
     .van-cell__label{
        color: #333;
        font-size: 14px;
        margin-top: 10px;
      }
    .box{
      display: flex;
      .img{
        text-align: center;
        border: 1px solid #ccc;
        font-size: 25px;
        font-weight: 100;
        color: #ccc;
        line-height: 80px;
        width: 80px;
        height: 80px;
      }
      input{
        outline: none !important;
        &::placeholder{color: #ccc;}
        border: 0;
      }
      span{
        width: 80px;
      }
    }
  }
  .footer{
      padding: 0 15px;
    .van-cell{
       padding-left: 0;
    padding-right: 0;
    }
    textarea{
      width: 100%;
      height: 127px;
      outline: none;
      border: 0;
      &::placeholder{
        color: #ccc;
        font-size: 12px;
      }
    }
  }
  .tabbar{
    z-index: 10;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    .van-button{
      flex: 1;
    }
  }
  .green{
    color: green;
  }
  label{
    display:  flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
